<template>
  <div class="login">
    <main class="main">
      <div class="bg"></div>
      <div class="white"></div>
      <div class="login-wrap top" ref="login">
        <div class="log"></div>
        <router-view></router-view>
      </div>
    </main>
    <base-footer ref="foot"></base-footer>
  </div>
</template>
<script>
import BaseFooter from "@/components/BaseComponents/Footer.vue";
export default {
  components: {
    BaseFooter,
  },
  methods: {

  },
};
</script>
<style lang="less" scoped>
.login {
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  .main {
    flex: auto;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    .bg {
      flex: 6;
      background: white url(../assets/imgs/login/bg.png) 0 36% no-repeat;
      background-size: cover;
    }
    .bg::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba(1, 61, 135, 0.4);
    }
    .white {
      flex: 4;
    }
    .login-wrap {
      width: 25.9rem;
      min-width:23rem ;
      width: 20%;
      position: absolute;
      left: 0;
      right: 0;
      top:0 !important;
      margin: 0 auto;
      margin-top: 3vw;
      .log {
        // width: 23rem;
        min-width: 16rem;
     width: 80%;
        height: 4.6rem;
        background-image:
                /*url(../assets/imgs/login/log.png),*/
          url(../assets/imgs/login/log-text.png);
        /*background-position: left top, right center;*/
        background-position:center;
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 98%, 70% 65%;
        margin: 0 auto;
      }
    }
  }
}
@media screen and (max-width: 1600px){
  .login {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    .main {
      flex: auto;
      display: flex;
      flex-flow: column nowrap;
      position: relative;
      .bg {
        flex: 6;
        background: white url(../assets/imgs/login/bg.png) 0 36% no-repeat;
            background-size: cover;
      }
      .bg::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(1, 61, 135, 0.4);
      }
      .white {
        flex: 4;
      }
      .login-wrap {
        // width: 25.5rem;
   max-width: 20rem;
        width: 30%;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        margin-top: 5vw;
        .log {
          // width: 18rem;
          height: 4.3rem;
          background-image:
                  /*url(../assets/imgs/login/log.png),*/
          url(../assets/imgs/login/log-text.png);
          /*background-position: left top, right center;*/
          background-position:center;
          background-repeat: no-repeat, no-repeat;
          background-size: 100% 98%, 70% 65%;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
